@charset "utf-8";
$fontPath:'<%= fontPath %>';
@font-face {
  font-family: "<%= fontName %>";
  src: url('#{$fontPath}<%= fontName %>.eot');
  src: url('#{$fontPath}<%= fontName %>.eot?#iefix') format('eot'),
  url('#{$fontPath}<%= fontName %>.woff') format('woff'),
  url('#{$fontPath}<%= fontName %>.ttf') format('truetype'),
  url('#{$fontPath}<%= fontName %>.svg#<%= fontName %>') format('svg');
}

@mixin <%= cssClass%>-styles {
  font-family: "<%= fontName %>";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: 16px;
  // speak: none; // only necessary if not using the private unicode range (firstGlyph option)
  text-decoration: none;
  text-transform: none;
}

%<%= cssClass%> {
  @include <%= cssClass%>-styles;
}

@function <%= cssClass%>-char($filename) {
  $char: "";
<% _.each(glyphs, function(glyph) { %>
  @if $filename == <%= glyph.fileName %> {
  $char: "\<%= glyph.codePoint %>";
}<% }); %>

@return $char;
}

@mixin <%= cssClass%>($filename, $insert: before, $extend: true) {
&:#{$insert} {
  @if $extend {
    @extend %<%= cssClass%>;
  } @else {
    @include <%= cssClass%>-styles;
  }
  content: <%= cssClass%>-char($filename);
}
}

<% _.each(glyphs, function(glyph) { %>.<%= cssClass%>-<%= glyph.fileName %> {
  @include <%= cssClass%>(<%= glyph.fileName %>);
}
<% }); %>
